<template>
	<view class="main-recharge">
		<reHeaders :types="types"></reHeaders>
		<view v-if="successRecharge">
			<view class="money-recharge">
				<view class="in-desc">
					充值金额
				</view>
				<view class="in-charge">
					<text class="money">￥</text>
					<input class="uni-input" v-model="rechargeObj.money" @input="onKeyInput" 
						placeholder="请输入带有2位小数的金额" />
					<image v-if="showClose" class="img1" src="/static/recharge/clear.png" 
						mode="" @click="clear">
					</image>
				</view>
			</view>
			<view class="mode-recharge money-str">
				<view class="mode-way">
					<text class="way">选择充值方式</text>
					<view class="mode-select" @click="openMode">
						<view class="mode-all">
							<image class="mode-pay" v-if="dataModel.title" :src="dataModel.url" mode=""></image>
							<input v-model="dataModel.title" placeholder="请选择您的充值方式" />
						</view>
						<image class="type-img" src="/static/recharge/arrow.png" mode=""></image>
					</view>
				</view>
				<view class="mode-way">
					<text class="way">选择充值渠道</text>
					<view class="mode-select" @click="openChannel">
						<view class="mode-all">
							<input v-model="payChannel" placeholder="请选择您的充值渠道" />
						</view>
						<image class="type-img" src="/static/recharge/arrow.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="card-holder" v-if="dataModel.id == 1">
				<text class="way">持卡人姓名</text>
				<input v-model="rechargeObj.name" placeholder="请输入持卡人姓名" />
			</view>
			<view class="next-recharge">
				<button v-if="!isDisabled" class="onbutton" type="default" @click="next">下一步</button>
				<button v-if="isDisabled" class="offbutton" type="default" @click="next">下一步</button>
			</view>
			<view class="tips-recharge">
				<text class="tips-warm">温馨提示</text>
				<view class="tips-container">
					<text>1、充值金额限制为50000-1000000</text> <br />
					<text>2、长时间未到账请联系在线客服</text>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom">
				<view class="popup-box">
					<text class="pop-cancle" @click="closeMode">取消</text>
					<text v-if="payType == 1" class="pop-content">充值方式</text>
					<text v-else class="pop-content">充值渠道</text>
					<text class="pop-check" @click="checkMode">确定</text>
				</view>
				<view class="popup-list">
					<uni-list v-if="payType == 1">
						<uni-list-item :title="item.title" :thumb="item.url" v-for="(item,index) in popDataList" 
							:key="item.id" @click="selectMode(item)" :showArrow="false">
							<template v-slot:right="">
								<image v-if="currentMode == item.id" style="width: 20px;height: 20px;" 
									src="/static/index/recharge/select.png"	mode="widthFix">
								</image>
							</template>
						</uni-list-item>
					</uni-list>
					<uni-list v-else>
						<uni-list-item v-for="item in channelList" :key="item.id">
							<text>{{item.name}}</text>
						</uni-list-item>
					</uni-list>
				</view>
			</uni-popup>
		</view>
		<view class="" v-if="!successRecharge">
			<transFerBank :rechargeMoney="rechargeObj.money"></transFerBank>
		</view>
	</view>
</template>
<script>
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import reHeaders from '../reheader.vue'
	import transFerBank from './transferbank.vue'
	import oRow from '@/components/oveui-layout/o-row/o-row.vue'
	export default {
		data() {
			return {
				successRecharge: true,
				rechargeObj: {
					money: '', //  金额
					type: '', // 方式
					channel: 1, // 渠道
					name: '' // 持卡人姓名
				}, // 充值对象
				payType: 1, // 支付类型
				dataModel: {}, // 支付方式
				payChannel: '', // 支付渠道
				currentMode: 1, // 选择支付方式
				payItem: {},
				popDataList: [
					{title: '网银转账', id: 1, url: '/static/index/recharge/bank.png'},
					{title: '微信', id: 2, url: '/static/index/recharge/wx.png'},
					{title: '云闪付', id: 3, url: '/static/index/recharge/bank.png'},
					{title: '支付宝', id: 4, url: '/static/index/recharge/alipay.png'},
				],
				channelList: [
					{name: '渠道1(50-500)', id: 1},
					{name: '渠道2(500-1000)', id: 2},
					{name: '渠道3(1000-2000)', id: 3},
					{name: '渠道4(2000-5000)', id: 4},
					{name: '渠道5(5000-10000)', id: 5},
				],
				types: '1',
			}
		},
		computed: {
			showClose(){
				if(this.rechargeObj.money){
					return true
				} else {
					return false
				}
			},
			isDisabled(){
				if(this.rechargeObj.money){
					return false
				} else {
					return true
				}
			}
		},
		components: {
			uniPopup,
			reHeaders,
			uniList,
			uniListItem,
			transFerBank,
			uniPopupDialog,
			uniPopupMessage,
		},
		onLoad() {},
		methods: {
			// 改变输入框值
			onKeyInput(e){
				this.rechargeObj.money = e.target.value
			},
			// 充值方式弹窗
			openMode(){
				this.payType = 1
				this.$refs.popup.open()
			},
			// 充值渠道弹窗
			openChannel(){
				this.payType = 2
				this.$refs.popup.open()
			},
			// 关闭
			closeMode(){
				this.dataModel = {}
				this.payItem = {}
				this.$refs.popup.close()
			},
			// 选择支付方式
			selectMode(item){
				this.currentMode = item.id
				this.payItem = item
			},
			// 支付方式确定
			checkMode(){
				this.dataModel = this.payItem
				this.$refs.popup.close()
			},
			// 清空输入框
			clear(){
				this.rechargeObj.money = ''
			},
			// 下一步
			next(){
				if(this.dataModel.id !== 1){
					console.log('第三方转账接口')
					// uni.showToast({
					// 	title:'支付成功',
					// 	icon:'checkmark',
					// 	duration:3000,
					// })
					
					uni.showToast({
						title:'支付失败',
						icon:'close',
						duration:3000,
					})
				} else {
					this.successRecharge = false
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	uni-page-body{
		height: 100%;
	}
	.main-recharge{
		background-color: #F4F5F9;
		height: 100%;
		.uni-input-placeholder{
			color: #DBDBDB;
			font-size: 30rpx;
		}
	}
	.header-recharge{
		padding: 10rpx 40rpx;
		display: flex;
		font-size: 30rpx;
		font-weight: bold;
		align-items: center;
		background-color: #FFFFFF;
		justify-content: space-between;
		.arrow, .service{
			height: 40rpx;
			width: 50rpx;
		}
		.arrow{
			transform: rotate(180deg);
		}
	}
	.money-recharge{
		.in-desc{
			padding: 16rpx 0rpx;
			font-size: 28rpx;
		}
		.in-charge{
			display: flex;
			position: relative;
			.money{
				padding-top: 10rpx;
				font-size: 60rpx;
			}
		}
		.uni-input{
			height: 80rpx;
		}
		/deep/ .uni-input-input{
			font-size: 60rpx;
		}
		.img1{
			height: 40rpx;
			width: 40rpx;
			position: absolute;
			right: 10rpx;
			top: 40rpx;
		}
	}
	.mode-recharge{
		height: 280rpx;
		.way{
			font-size: 28rpx;
		}
		.mode-select{
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			/deep/ .uni-input-input{
				font-weight: bold;
				font-size: 26rpx;
			}
			.mode-all{
				display: flex;
			}
			.mode-pay{
				margin-right: 20rpx;
				height: 40rpx;
				width: 40rpx;
			}
		}
		.type-img{
			margin-top: 10rpx;
			height: 40rpx;
			width: 40rpx;
		}
	}
	.card-holder{
		height: 130rpx;
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;
		.way{
			font-size: 28rpx;
		}
	}
	.next-recharge{
		.onbutton{
			color: #FFFFFF;
			background-color: #F59328;
		}
		.offbutton{
			color: #FFFFFF;
			background-color: #FFD09C;
		}
	}
	.tips-recharge{
		padding: 20rpx 40rpx;
		.tips-warm{
			font-weight: bold;
			font-size: 30rpx;
		}
		.tips-container{
			color: #666666;
		}
	}
	.popup-box{
		height: 80rpx;
		display: flex;
		font-size: 28rpx;
		padding: 0rpx 40rpx;
		line-height: 80rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid #EAEAEA;
		.pop-cancle{
			color: #9F9F9F;
		}
		.pop-content{
			font-weight: bold;
			font-size: 32rpx;
		}
		.pop-check{
			font-weight: bold;
			color: #F59328;
		}
	}
	.popup-list{
		padding: 40rpx;
		background-color: #FFFFFF;
	}
</style>
